<template>
  <div class="home">
    <div class="home_content">
      <el-tabs v-model="activeName" type="card" class="tabs" :before-leave="onBeforeLeaveClick">
        <el-tab-pane label="轮播图" name="banner"> </el-tab-pane>
        <el-tab-pane label="商品推荐" name="goodsrefer"></el-tab-pane>
        <el-tab-pane label="皮肤修复辅料" name="insgoods"></el-tab-pane>
        <el-tab-pane label="一次性耗材用品" name="Hmgoods"></el-tab-pane>
        <el-tab-pane label="医用采血管" name="Lmgoods"></el-tab-pane>
        <el-tab-pane label="分类设置" name="cat"></el-tab-pane>
      </el-tabs>

      <div class="contentbox" v-if="activeName === 'goodsrefer'">
        <Button label="添加" type="primary" class="_addbuttom" @click="onAddClick()" />
        <Goods :list="goodsData.floorInfoList" :loading="loading" @remove="onDelGoodClick" />
      </div>
      <div v-else-if="activeName === 'cat'">
        <Cate @change="onCateChange" />
      </div>
      <div class="contentbox" v-else>
        <Button label="添加" type="primary" v-if="activeName === 'banner' || activeName === 'goodsrefer'" class="_addbuttom" @click="onAddBannerClick" />
        <Banner :activeName="activeName" :list="homeData.floorInfoList" :loading="loading" @up="onMoveUpClick" @down="onMoveDownClick" @remove="onDelClick" />
      </div>
    </div>

    <div class="audit_button">
      <Button label="保存" type="primary" @click="onSaveClick" />
      <Button label="发布" type="primary" @click="onPublishClick" />
      <Button label="预览" type="primary" @click="onPreviewClick" />
    </div>
    <Link v-model:visible="linkVisible" :linkType="0b10" @change="onAddGoodsChange" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '@/api'
import consts from '@/consts'
import Link from './components/link.vue'
import Goods from './goods.vue'
import Banner from './banner.vue'
import Cate from './cate.vue'
import Button from '@/components/button/button.vue'

const router = useRouter()

const activeName = ref('banner')

const homeData = reactive({
  floorId: 0,
  floorInfoList: [],
  floorName: ''
})

const goodsData = reactive({
  floorId: 0,
  floorInfoList: [],
  floorName: ''
})

const cateData = reactive({
  floorId: 0,
  floorInfoList: [],
  floorName: ''
})

let loading = ref(false)

let linkVisible = ref(false)

const publish = async () => {
  let { err } = await api.get('/medinstrument/boss/index/generating')
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('发布成功')
    loadData(activeName.value)
  }
}

const save = async () => {
  let params
  if (activeName.value === 'goodsrefer') {
    const str = JSON.stringify(goodsData)
    params = JSON.parse(str)
    params.floorInfoList.map((e) => {
      e.floorInfoVal = JSON.stringify([e.floorInfoVal])
    })
  } else if (activeName.value === 'cat') {
    const str = JSON.stringify(cateData)
    params = JSON.parse(str)
  } else {
    const str = JSON.stringify(homeData)
    params = JSON.parse(str)
  }
  let { err } = await api.post('/medinstrument/boss/index/save', params)
  if (err) {
    ElMessage.error(err)
  } else {
    ElMessage.success('保存成功')
    loadData(activeName.value)
  }
}

const loadData = async (name) => {
  loading.value = true
  let { err, data } = await api.get(`/medinstrument/boss/index/list?name=${name}`)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    goodsData.floorId = data.floorId
    goodsData.floorName = data.floorName
    goodsData.floorInfoList = data.floorInfoList?.map((e) => {
      const item = {
        floorInfoImg: e.floorInfoImg,
        floorInfoName: e.floorInfoName,
        sort: e.sort,
        floorInfoUrl: e.floorInfoUrl,
        floorInfoVal: e.floorInfoVal
      }
      if (e.floorInfoVal) {
        try {
          const info = JSON.parse(e.floorInfoVal)
          item.floorInfoVal = info[0] || {}
        } catch (e) {
          item.floorInfoVal = {}
        }
      } else {
        item.floorInfoVal = {}
      }
      return item
    })

    homeData.floorInfoList = data.floorInfoList
    homeData.floorId = data.floorId
    homeData.floorName = data.floorName

    cateData.floorInfoList = data.floorInfoList
    cateData.floorId = data.floorId
    cateData.floorName = data.floorName
  }
}

const onBeforeLeaveClick = (activeName) => {
  loadData(activeName)
}
const onAddClick = () => {
  linkVisible.value = true
}

const onAddBannerClick = () => {
  if (homeData.floorInfoList.length >= 5 && activeName.value === 'banner') return
  homeData.floorInfoList.push({
    floorInfoId: '',
    floorInfoImg: '',
    floorInfoName: '',
    floorInfoUrl: '',
    floorInfoVal: '',
    sort: 0
  })
}

const onMoveUpClick = (index) => {
  homeData.floorInfoList[index].sort -= 1
  homeData.floorInfoList[index - 1].sort += 1
  homeData.floorInfoList.sort((a, b) => a.sort - b.sort)
}
const onMoveDownClick = (index) => {
  homeData.floorInfoList[index].sort += 1
  homeData.floorInfoList[index + 1].sort -= 1
  homeData.floorInfoList.sort((a, b) => a.sort - b.sort)
}
const onDelClick = (index) => {
  if (homeData.floorInfoList.length > 1) {
    homeData.floorInfoList.splice(index, 1)
  }
}

const onSaveClick = () => {
  save()
}

const onPublishClick = () => {
  publish()
}

const onDelGoodClick = (index) => {
  if (goodsData.floorInfoList.length > 1) {
    goodsData.floorInfoList.splice(index, 1)
  }
}

const onAddGoodsChange = (val) => {
  if (goodsData.floorInfoList.length >= 5) return
  const info = {
    floorInfoImg: val.goodsImg,
    floorInfoName: val.goodsName,
    floorInfoUrl: '跳转商品',
    floorInfoVal: {},
    sort: 0
  }
  const item = {
    goodsId: '',
    goodsName: '',
    goodsStatus: '',
    price: '',
    supplierName: ''
  }

  item.goodsId = val.goodsId
  item.goodsName = val.goodsName
  item.goodsStatus = val.goodsStatus
  item.supplierName = val.supplierName
  item.price = val.goodsSalesPrice
  info.floorInfoVal = item

  goodsData.floorInfoList.push(info)
}

const onCateChange = (val) => {
  cateData.floorInfoList = val.map((e) => {
    return {
      floorInfoId: '',
      floorInfoName: e.catName,
      floorInfoVal: e.catId,
      sort: 0
    }
  })
}

const onPreviewClick = () => {
  let { href } = router.resolve({
    path: `/home/goodsPreview`
  })
  window.open(href, '_blank')
}

const onCancelClick = () => {}
const onSaveCateClick = () => {
  save()
}

onMounted(() => {
  loadData('banner')
})
</script>
<style lang="scss">
.home {
  .home_content {
    background-color: #fff;
    margin: 10px 15px 10px 10px;

    .tabs,
    .contentbox {
      padding: 20px 0 0 20px;
    }

    .contentbox {
      min-height: 700px;

      ._addbuttom {
        margin-bottom: 20px;
      }
    }
  }
}
</style>
